<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>课程预警</title>
	<link rel="stylesheet" href="../css/common2.css">
	<link rel="stylesheet" href="../css/urlty.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
	<style>
		.state {
			color: white;
			border-radius: 3px;
			font-size: 14px;
			font-weight: bold;
			padding: 4px;
			background-color: #4BAF4F;
		}

		.conduct {
			background-color: #F8B551;
		}

		.end {
			background-color: #E64919;
		}

		.class-end {
			background-color: #9F9F9F;
		}

		#vue-root {
			padding-top: 20px;
		}
		.search_img1 {
			position: absolute;
			
		}
		
  .search1 {
    width: 15vw;
    max-width: 140px;
    height: 35px;
    padding-left: 10px;
    font-size: 14px;
    color: #686868;
    /* position: absolute; */
    right: 100px;
    border: 1px solid;
    display: inline-block;
  }

	</style>
</head>

<body>
	<div id="vue-root">
		<a href="warning_reminder_item.html" style="color: white">
			<div class="add" v-if="able.add">预警设置</div>
		</a>
		<select class="search1" v-model="search.schoolId">
			<option :value="undefined">请选择校区</option>
			<option v-for="school in schools" :key="school.id" :value="school.id" v-text="school.name">
			</option>
		</select>
		<input placeholder="请输入学员姓名" class="search1" v-model="search.name" style="height: 33px;">

		<select class="search1" v-model="search.courseId">
			<option :value="undefined">请选择课程</option>
			<option v-for="course in courses" :key="course.id" :value="course.id" v-text="course.name">
			</option>
		</select>
		<v-select
 
		v-model="search.people"
		:options="peoples"
		label="name"
		:reduce="people => people.id"
		placeholder="请选择跟进人"
		:filterable="true"
		:clearable="true"
		style="width: 150px; display: inline-block;"
	  ></v-select>
		<select class="search1" v-model="search.studentStatus">
			<option :value="undefined">请选择状态</option>
			<option value="退费">退费</option>
			<option value="请假">请假</option>
			<option value="停课">停课</option>
			<option value="在读">在读</option>
			<option value="过期">过期</option>
			<option value="课程暂未开始">课程暂未开始</option>
		</select>

		<input placeholder="课程结束起" class="search1" id="startTime" v-model="search.startTime" />
		<input placeholder="课程结束止" class="search1" id="endTime" v-model="search.endTime"/>

		<img src="../image/search.png" height="35" width="35" alt="" class="search_img1" @click="getData0">
		
		<div class="table">
			<table class="table_top">
				<thead>
					<tr>
						<th>
							<input type="checkbox" class="check-box" v-model="all">序号
						</th>
						
						<th>学员姓名</th>
						<th>学员手机号</th>
						<th>分配校区</th>
						
						<th>报读课程</th>
						<th>报读模式</th>
						<th>跟进人</th>
						<th>购买数量</th>
						<th>已消耗数量</th>
						<th>剩余数量</th>
						<th>课程有效期</th>
						<!-- <th>所在班级</th>
						<th>授课老师</th> -->
						<th>状态</th>
						<th>已提醒次数</th>
						<!-- <th>编辑/删除</th> -->
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(student,index) in list" :key="student.id">
						<td>
							<input type="checkbox" class="check-box" v-model="student.checked">
							<span v-text="index+1"></span>
						</td>
						<td v-text="student.studentName"></td>
						<td v-text="student.bindCode"></td>
						<td v-text="student.schoolName"></td>
						<td v-text="student.courseName"></td>
						<td>
							<span v-if="student.courseType === 1">按课时收费</span>
							<span v-else-if="student.courseType === 2">按月收费</span>
							<span v-else-if="student.courseType === 3">按天收费</span>
							<span v-else-if="student.courseType === 4">按季收费</span>
							<span v-else-if="student.courseType === 5">按期收费</span>
							<span v-else-if="student.courseType === 6">按课包收费</span>
							<span v-else-if="student.courseType === 7">按体验收费</span>
						</td>
						<td v-text="student.peopleName"></td>
						<td v-text="student.countNum"></td>
						<td v-text="student.xiaoNum"></td>
						<td v-text="student.number"></td>
						<td v-text="(student.startTime+' ~ '+student.endTime)"></td>
						<!-- <td v-text="student.className"></td>
						<td v-text="student.teacherName"></td> -->
						<td v-text="student.studentStatus"></td>
						<td v-text="student.reminderCount"></td>
						
					</tr>

				</tbody>
			</table>
		</div>
		<div class="delete" @click="batchDelete" v-if="able.del&&total>1">批量删除</div>

		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
			<li>
				<a v-text="pages"></a>
			</li>
		</ul>
		<div style="float: right;">
			总共{{total}}条记录
			<select class="ui-select init" style="height:32px" v-model="pageSize">
				<option :value="10">每页10条</option>
				<option :value="30">每页30条</option>
				<option :value="100">每页100条</option>
			</select>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/vue-select.min.js"></script>
	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>
	<script src="/js/auth_util.js"></script>

	<script>
			Vue.component('v-select', VueSelect.VueSelect);
		var agentId=top_params().id;
		var app = new Vue(merge({
			data: {
				urls: {
					del: '/pc/room/del',
					list: '/pc/student/studentWarning?agentId=' + top_params().id
				},
				courses:[],
				peoples: [],
				schools: [],
			},
			created () {
				abled('renewalWarning', this);
				this.getData();
				axios.get('/pc/course/all/' + agentId).then(function (res) {
					this.courses=res.data
				}.bind(this));
				axios.get('/pc/staffUser/all/' + agentId).then(function (res) {
					
					this.peoples = res.data;
				}.bind(this));
				axios.get('/pc/school/all/' + agentId).then(function (res) {
					this.schools = res.data;
				}.bind(this));
			
				
			},
			computed: {
				getStatus() {
					return (student) => {
						const now = new Date();
						const startTime = new Date(student.startTime);
						const endTime = new Date(student.endTime);

						if (student.courseType === 1) { // 按月
							if (now > endTime) {
								return '已结课';
							} else {
								return '正常';
							}
						} else if (student.courseType === 2 || student.courseType === 3) { // 按天或按课时
							if (student.number > 0) {
								return '正常';
							} else {
								return '已结课';
							}
						}
						return '未知状态';
					};
				}
			}

		}));
		["startTime", "endTime"].forEach(function (it) {
			laydate.render({
				elem: "#" + it,
				type: "date",
				done: function (value, date, endDate) {
					app.search[it] = value;
				},
			});
		});
	</script>
</body>

</html>